<template>
  <div class="layout-container">
    <el-container class="main-container">
      <!-- 左侧图标分类导航栏 -->
      <el-aside width="70px" class="sidebar-icons">
        <div class="logo">
          <img src="/logo.svg" alt="BIP学习平台" />
          <span>学习</span>
        </div>
        <div class="nav-icons">
          <NavIconItem 
            label="首页" 
            index="home" 
            :isActive="activeCategory === 'home'"
            @click="handleCategorySelect"
          >
            <el-icon><HomeFilled /></el-icon>
          </NavIconItem>
          <NavIconItem 
            label="教学" 
            index="education" 
            :isActive="activeCategory === 'education'"
            @click="handleCategorySelect"
          >
            <el-icon><Notebook /></el-icon>
          </NavIconItem>
          <NavIconItem 
            label="考试" 
            index="exam" 
            :isActive="activeCategory === 'exam'"
            @click="handleCategorySelect"
          >
            <el-icon><EditPen /></el-icon>
          </NavIconItem>
          <NavIconItem 
            label="统计" 
            index="analytics" 
            :isActive="activeCategory === 'analytics'"
            @click="handleCategorySelect"
          >
            <el-icon><PieChart /></el-icon>
          </NavIconItem>
          <NavIconItem 
            label="用户" 
            index="user" 
            :isActive="activeCategory === 'user'"
            @click="handleCategorySelect"
          >
            <el-icon><UserFilled /></el-icon>
          </NavIconItem>
        </div>
      </el-aside>

      <!-- 右侧内容区 -->
      <el-container class="content-container">
        <!-- 顶部状态栏 -->
        <el-header class="header">
          <div class="header-top">
            <div class="header-left">
              <!-- 面包屑导航已移除 -->
            </div>
            
            <div class="header-right">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索..."
                class="search-input"
                @keyup.enter="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              
              <div class="header-actions">
                <el-tooltip content="通知中心" placement="bottom" :hide-after="0">
                  <el-badge :value="3" class="action-item">
                    <el-button type="text" class="icon-button">
                      <el-icon><Bell /></el-icon>
                    </el-button>
                  </el-badge>
                </el-tooltip>
                
                <el-tooltip content="消息" placement="bottom" :hide-after="0">
                  <el-badge :value="5" class="action-item">
                    <el-button type="text" class="icon-button">
                      <el-icon><Message /></el-icon>
                    </el-button>
                  </el-badge>
                </el-tooltip>
                
                <el-tooltip content="帮助" placement="bottom" :hide-after="0">
                  <el-button type="text" class="icon-button action-item">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
              
              <div class="user-info" v-if="userStore.isLoggedIn">
                <el-dropdown>
                  <span class="user-dropdown">
                    <el-avatar :size="32" :src="userStore.userInfo?.avatar">
                      {{ userStore.userInfo?.name?.charAt(0) }}
                    </el-avatar>
                    <span>{{ userStore.userInfo?.name }}</span>
                    <el-icon><ArrowDown /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="$router.push('/profile')">
                        <el-icon><User /></el-icon>个人中心
                      </el-dropdown-item>
                      <el-dropdown-item @click="$router.push('/settings')">
                        <el-icon><Setting /></el-icon>设置
                      </el-dropdown-item>
                      <el-dropdown-item divided @click="handleLogout">
                        <el-icon><SwitchButton /></el-icon>退出登录
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div v-else class="auth-buttons">
                <el-button @click="$router.push('/login')">登录</el-button>
                <el-button type="primary" @click="$router.push('/register')">注册</el-button>
              </div>
            </div>
          </div>
          
          <!-- 分类导航按钮 -->
          <div class="category-nav" v-if="activeCategory !== 'home'">
            <div class="nav-buttons">
              <!-- 教学分类 -->
              <template v-if="activeCategory === 'education'">
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/courses'"
                  @click="$router.push('/courses')"
                >
                  课程管理
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/courses/create'"
                  @click="$router.push('/courses/create')"
                >
                  创建课程
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/chapters'"
                  @click="$router.push('/chapters')"
                >
                  章节管理
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/students'"
                  @click="$router.push('/students')"
                >
                  学生管理
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/teachers'"
                  @click="$router.push('/teachers')"
                >
                  教师管理
                </el-button>
              </template>

              <!-- 考试分类 -->
              <template v-if="activeCategory === 'exam'">
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/exams'"
                  @click="$router.push('/exams')"
                >
                  考试管理
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/exams/create'"
                  @click="$router.push('/exams/create')"
                >
                  创建考试
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/questions'"
                  @click="$router.push('/questions')"
                >
                  题库管理
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/results'"
                  @click="$router.push('/results')"
                >
                  成绩管理
                </el-button>
              </template>

              <!-- 统计分类 -->
              <template v-if="activeCategory === 'analytics'">
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/learning'"
                  @click="$router.push('/learning')"
                >
                  学习统计
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/reports'"
                  @click="$router.push('/reports')"
                >
                  报表分析
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/achievements'"
                  @click="$router.push('/achievements')"
                >
                  成就管理
                </el-button>
              </template>

              <!-- 用户分类 -->
              <template v-if="activeCategory === 'user'">
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/profile'"
                  @click="$router.push('/profile')"
                >
                  个人中心
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/settings'"
                  @click="$router.push('/settings')"
                >
                  系统设置
                </el-button>
                <el-button 
                  type="primary" 
                  :plain="$route.path !== '/messages'"
                  @click="$router.push('/messages')"
                >
                  消息中心
                </el-button>
              </template>
            </div>
          </div>
        </el-header>

        <!-- 主要内容区域 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import NavIconItem from '@/components/NavIconItem.vue'
import { 
  HomeFilled,
  Notebook,
  EditPen,
  PieChart,
  UserFilled,
  Document,
  Edit,
  DataLine,
  User,
  Setting,
  Search, 
  ArrowDown, 
  SwitchButton,
  Plus,
  Collection,
  QuestionFilled,
  Trophy,
  ChatDotRound,
  Bell,
  Message
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const searchKeyword = ref('')
const activeCategory = ref('home')

// 根据当前路由设置激活的分类
const setActiveCategory = () => {
  const path = route.path
  if (path === '/') {
    activeCategory.value = 'home'
  } else if (path.startsWith('/courses') || path.startsWith('/chapters') || 
             path.startsWith('/students') || path.startsWith('/teachers')) {
    activeCategory.value = 'education'
  } else if (path.startsWith('/exams') || path.startsWith('/questions') || 
             path.startsWith('/results')) {
    activeCategory.value = 'exam'
  } else if (path.startsWith('/learning') || path.startsWith('/reports') || 
             path.startsWith('/achievements')) {
    activeCategory.value = 'analytics'
  } else if (path.startsWith('/profile') || path.startsWith('/settings') || 
             path.startsWith('/messages')) {
    activeCategory.value = 'user'
  }
}

// 处理分类选择
const handleCategorySelect = (index) => {
  // 如果点击的是首页，直接跳转
  if (index === 'home') {
    activeCategory.value = 'home'
    router.push('/')
    return
  }
  
  // 切换到新分类
  activeCategory.value = index
  
  // 根据分类跳转到默认页面
  switch (index) {
    case 'education':
      router.push('/courses')
      break
    case 'exam':
      router.push('/exams')
      break
    case 'analytics':
      router.push('/learning')
      break
    case 'user':
      router.push('/profile')
      break
  }
}

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push(`/courses?search=${encodeURIComponent(searchKeyword.value)}`)
  }
}

const handleLogout = () => {
  userStore.logout()
  router.push('/')
}

// 组件挂载时设置当前分类
onMounted(() => {
  setActiveCategory()
})

// 监听路由变化
router.afterEach((to) => {
  setActiveCategory()
})
</script>

<style scoped>
.layout-container {
  height: 100vh;
  overflow: hidden;
}

.main-container {
  height: 100%;
}

/* 左侧图标导航栏样式 */
.sidebar-icons {
  background: linear-gradient(to bottom, #2c5aa0, #4a8bd8);
  color: #ffffff;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 70px;
  min-width: 70px;
  box-sizing: border-box;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.logo img {
  height: 30px;
  width: 30px;
  margin: 0 auto 5px auto;
  display: block;
}

.logo span {
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: block;
  width: 100%;
}

.nav-icons {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  background: linear-gradient(to right, #4a8bd8, #2c5aa0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  padding: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 90px; /* 恢复原来的高度 */
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  width: 100%;
  padding: 0 16px;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  height: 100%;
}

/* 分类导航按钮样式 */
.category-nav {
  background-color: #3a7bc8;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-buttons :deep(.el-button) {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.nav-buttons :deep(.el-button:hover) {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.nav-buttons :deep(.el-button:not(.is-plain)) {
  background-color: #ffffff;
  color: #2c5aa0;
  border-color: #ffffff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-item {
  margin: 0 4px;
}

.icon-button {
  color: #ffffff;
  font-size: 18px;
  padding: 7px;
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.search-input {
  width: 200px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.search-input :deep(.el-input__inner) {
  background: transparent;
  border: none;
  color: #ffffff;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.7);
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #ffffff;
}

.content-container {
  flex: 1;
  width: calc(100% - 70px);
}

.main-content {
  background: #f0f8ff;
  padding: 20px;
  overflow-y: auto;
  height: calc(100vh - 90px); /* 恢复原来的高度 */
  border-top: 1px solid #e0e6ed;
}
</style>